﻿@{
    ViewBag.Title = "ExplosionAnimation";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style> 
    #canvas {
        margin-left: 10px;
        background: lightskyblue;
        border: thin solid rbga(0,0,0,1.0);
        -webkit-box-shadow: rgba(0,0,0,0.5) 4px 4px 6px;
        -moz-box-shadow: rgba(0,0,0,0.5) 4px 4px 6px;
        box-shadow: rgba(0,0,0,0.5) 4px 4px 6px;
    }

    #explosionButton {
        padding-left: 10px;
    }
</style>

<h2>Explosion Animation</h2>

<input id='explosionButton' type='button' value='start'/>
<br />
<br />
<canvas id='canvas' width='400' height='300'>
    Canvas not supported
</canvas>
  
<script src='/JsLib/zeus/animation/zeus.animation.stopwatch.js'></script>
<script src='/JsLib/zeus/animation/zeus.animation.timer.js'></script>
<script src='/JsLib/zeus/animation/zeus.animation.frame.js'></script>
<script src='/JsLib/zeus/game/zeus.sprites.js'></script>
<script type="text/javascript">
    var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    explosionButton = document.getElementById('explosionButton'),

    NUM_EXPLOSION_PAINTERS = 9,
    
    // Painters......var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    explosionButton = document.getElementById('explosionButton'),

    // Painters..................................................

    bombNoFusePainter = new ImagePainter('/Images/game/bomb-no-fuse.png'),
    fuseBurningPainters = [],
    explosionPainters = [],

    // Animators.................................................

    explosionAnimator = new SpriteAnimator(
              explosionPainters,
              function () { bomb.painter = bombNoFusePainter; });

    // Bomb......................................................

    bomb = new Sprite('bomb', bombNoFusePainter),

    // Event Handlers................................................

    explosionButton.onclick = function (e) {
        if (bomb.animating) // not now...
            return;

        explosionAnimator.start(bomb, 1000);

        // wait for 2 seconds, then reset to the
        // original bomb image
        /*
        setTimeout(function () {
            bomb.painter = bombNoFusePainter;
        }, 2000);
        */
    };

    // Animation.....................................................

    function animate(now) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        bomb.paint(context);
        window.requestNextAnimationFrame(animate);
    }

    // Initialization bomb location

    /*
    bomb.left = BOMB_LEFT;
    bomb.top = BOMB_TOP;
    bomb.width = BOMB_WIDTH;
    bomb.height = BOMB_HEIGHT;
    */

    for (var i = 0; i < NUM_EXPLOSION_PAINTERS; ++i) {
        explosionPainters.push(new ImagePainter('/Images/game/explosion-0' + i + '.png'));
    }

    window.requestNextAnimationFrame(animate);
</script>